<template>
    <div>首页</div>
    <div class="pie-container">
        <div class="flex">
            <el-radio-group v-model="pieType" size="large">
                <el-radio-button label="sale_">销量</el-radio-button>
                <el-radio-button label="_money">销售额</el-radio-button>
            </el-radio-group>
            <el-select v-model="pieDay" class="m-2" placeholder="Select" size="large">
                <el-option v-for="item in pieDays" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div id="pie" style="width: 100%; height: 400px"></div>
    </div>
    <div class="map-container">
        <div id="map" style="width: 100%; height: 600px"></div>
    </div>
    <div>
        <img v-lazy src="@/assets/1.jpg" alt="" srcset="">
    </div>
    <div>
        <img v-lazy src="@/assets/2.jpg" alt="" srcset="">
    </div>
    <div>
        <img v-lazy src="@/assets/3.jpg" alt="" srcset="">
    </div>
    <div>
        <img v-lazy src="@/assets/4.jpg" alt="" srcset="">
    </div>
</template>
  
<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref, watch } from "vue";
import { stat } from "@/api";
// 直接把地址的json数据导入
import china from "@/assets/json/china.json";
type EChartsOption = echarts.EChartsOption;

// pieType 要得到的就是 sale_ 或者 _money
const pieType = ref<"sale_" | "_money">("sale_");
const pieDay = ref("yesterday");
const pieDays = [
    {
        label: "昨天",
        value: "yesterday",
    },
    {
        label: "今天",
        value: "today",
    },
    {
        label: "前3天",
        value: "three_days",
    },
    {
        label: "前7天",
        value: "seven_days",
    },
    {
        label: "前14天",
        value: "fourteen_days",
    },
];
let pieData: IPieItem[] = [];
var pieChart: echarts.ECharts;
var pieOption: EChartsOption;

onMounted(() => {
    stat.getIndexStatApi().then((res) => {
        pieData = res.data.salePie;
        // 这个是饼图数据
        // res.data.salePie
        // 图表的数据要求的是 {name,value}
        // 对请求回来的数据进行转换
        const data = res.data.salePie.map((item) => ({
            name: item.name,
            value: item.sale_yesterday, // 默认一开始显示的是的 昨天的销量
        }));
        // 数据从series[0].data传入
        // series 是 echarts.SeriesOption | echarts.SeriesOption[] | undefined 类型
        // 不能直接 [索引] 访问
        // 收缩类型 , 然后把数据传入
        (pieOption.series as echarts.SeriesOption[])[0].data = data;
        // 这就是数据渲染
        pieOption && pieChart.setOption(pieOption);

        // 可以把地图数据传入里面
        initMap(res.data.saleMap);
    });

    var chartDom = document.getElementById("pie")!;
    pieChart = echarts.init(chartDom);
    pieOption = {
        // 鼠标移动到对应的数据上之后的提示
        tooltip: {
            trigger: "item",
            backgroundColor: "rgba(50,50,50,.7)",
            textStyle: {
                color: "#fff",
            },
            formatter: "{b}: {c},({d}%)",
        },
        // 图例
        legend: {
            top: "5%",
            left: "right",
            orient: "vertical",
            height: 100,
        },
        series: [
            {
                // name: "Access From",
                left: "-30%",
                type: "pie",
                radius: ["40%", "70%"],
                avoidLabelOverlap: false,
                label: {
                    show: true,
                    position: "outside",
                },
                // 高亮状态
                emphasis: {
                    label: {
                        show: true,
                    },
                },
                labelLine: {
                    show: true,
                },
                data: [
                    // 图表要求的数据格式： {name,value}
                    { value: 1048, name: "Search Engine" },
                    { value: 735, name: "Direct" },
                    { value: 580, name: "Email" },
                    { value: 484, name: "Union Ads" },
                    { value: 300, name: "Video Ads" },
                ],
            },
        ],
    };
});

// 当 pieDay 和 pieType 任何一个发生变化，都应该修改 饼图的数据
// 做法有很多种， radio 和 select 都有 change 事件，可以做 pieDay 和 pieType 变化时的处理
// change事件相对麻烦一些，建议使用 watch
watch([pieDay, pieType], () => {
    let key = "";
    if (pieType.value === "sale_") {
        key = pieType.value + pieDay.value;
    } else {
        key = pieDay.value + pieType.value;
    }
    // 根据key 取出数据，重新渲染
    const data = pieData.map((item) => ({
        name: item.name,
        // 根据动态生成的 key 取出对应的数据
        value: item[key], // 默认一开始显示的是的 昨天的销量
    }));
    (pieOption.series as echarts.SeriesOption[])[0].data = data;
    pieChart.setOption(pieOption);
});

// 地图的使用：
// 1. 需要一个json数据，让这些json数据告诉我们现在这个地图要展示哪些地区
// http://datav.aliyun.com/portal/school/atlas/area_selector  去这获取我们想要地图信息

function initMap(mapData: IMapItem[]) {
    type EChartsOption = echarts.EChartsOption;
    var chartDom = document.getElementById("map")!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    echarts.registerMap("HK", china as any);

    // 转换mapData 为 {name,value} 的形式
    const data = mapData.map((item) => ({
        name: item.areaName,
        value: item.saleNum,
    }));

    myChart.setOption(
        (option = {
            title: {
                left: "center",
                text: "全国销量分布图",
                textStyle: {
                    color: "#333",
                    fontSize: 20,
                    fontWeight: "normal",
                },
            },
            tooltip: {
                trigger: "item",
                formatter: "{b}<br/>销量：{c}",
                backgroundColor: 'rgba(70,70,70,.7)',
                textStyle: {
                    color: '#fff'
                }
            },
            visualMap: {
                min: 0,
                max: 1000000,
                realtime: true,
                calculable: true,
                inRange: {
                    color: ["#fff", "pink", "orange", 'red', 'gold'],
                },
            },
            series: [
                {
                    zoom: 1.2,
                    // zoom: 1.2,
                    type: "map",
                    map: "HK",
                    label: {
                        show: false,
                    },
                    emphasis: {
                        label: {
                            show: false

                        },
                        itemStyle: {
                            areaColor: '#0a0'
                        }
                    },
                    data,
                },
            ],
            // 一定要保证 后端返回的name 要和 json 里面的 name 要一致，如果不一致，需要自己在下面进行映射
            // nameMap: {
            //   "四川省": "四川",
            // },
        })
    );
    option && myChart.setOption(option);
}
</script>
  
<style lang="less" scoped>
.flex {
    display: flex;
    justify-content: space-between;
}
</style>